<!-- Simple list -->
<button data-target="#simple-listing-dialog" data-toggle="modal" class="btn pmd-ripple-effect btn-primary pmd-z-depth" type="button">List</button>
<div tabindex="-1" class="modal fade" id="simple-listing-dialog" style="display: none;" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header pmd-modal-bordered">
				<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
				<h2 class="pmd-card-title-text">Listing</h2>
			</div>
			<div class="pmd-modal-list">
				<ul class="list-group pmd-list">
					<li class="list-group-item">Cras justo odio</li>
					<li class="list-group-item">Dapibus ac facilisis inDapibus ac facilisis in Dapibus ac facilisis in</li>
					<li class="list-group-item">Morbi leo risus</li>
					<li class="list-group-item">Porta ac consectetur ac</li>
					<li class="list-group-item">Vestibulum at eros</li>
				</ul>
			</div>
		</div>
	</div>
</div>

<!-- Avatar Listing -->
<button data-target="#avatar-dialog" data-toggle="modal" class="btn pmd-ripple-effect btn-primary pmd-z-depth" type="button">List with Avatar</button>
<div tabindex="-1" class="modal fade" id="avatar-dialog" style="display: none;" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header pmd-modal-bordered">
				<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
				<h2 class="pmd-card-title-text">Avatar List</h2>
			</div>
			<div class="pmd-modal-list">
				<ul class="list-group pmd-list-avatar">
					<li class="list-group-item">
						<div class="media-left"> <a href="javascript:void(0);" class="avatar-list-img"> <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="https://opensource.propeller.in/components/list/img/40x40.png" data-holder-rendered="true"> </a> </div>
						<div class="media-body media-middle">Porta ac consectetur ac</div>
					</li>
					<li class="list-group-item">
						<div class="media-left"> <a href="javascript:void(0);" class="avatar-list-img"> <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="https://opensource.propeller.in/components/list/img/40x40.png" data-holder-rendered="true"> </a> </div>
						<div class="media-body media-middle">Dapibus ac facilisis in</div>
					</li>
					<li class="list-group-item">
						<div class="media-left"> <a href="javascript:void(0);" class="avatar-list-img"> <img alt="40x40" data-src="holder.js/40x40" class="img-responsive" src="https://opensource.propeller.in/components/list/img/40x40.png" data-holder-rendered="true"> </a> </div>
						<div class="media-body media-middle">Porta ac consectetur ac</div>
					</li>
				</ul>
			</div>
			<div class="pmd-modal-action text-right pmd-modal-bordered">
				<button data-dismiss="modal"  class="btn pmd-ripple-effect btn-primary pmd-btn-flat" type="button">Cancel</button>
			</div>
		</div>
	</div>
</div>

<!-- Icon Listing -->
<button data-target="#listing-dialog" data-toggle="modal" class="btn pmd-ripple-effect btn-primary pmd-z-depth" type="button">List with Icon</button>
<div tabindex="-1" class="modal fade" id="listing-dialog" style="display: none;" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header pmd-modal-bordered">
				<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
				<h2 class="pmd-card-title-text">Icon Listing</h2>
			</div>
			<div class="pmd-modal-list">
				<ul class="list-group pmd-list-icon">
					<li class="list-group-item"> <i class="material-icons media-left pmd-sm">mood</i> <span class="media-body">Cras justo odio</span> </li>
					<li class="list-group-item"><i class="material-icons media-left media-middle">notifications</i>
						<div class="media-body">Dapibus ac facilisis in</div>
					</li>
					<li class="list-group-item"><i class="material-icons media-left">person_add</i>
						<div class="media-body">Morbi leo risus</div>
					</li>
					<li class="list-group-item"><i class="material-icons media-left">share</i>
						<div class="media-body">Porta ac consectetur ac</div>
					</li>
					<li class="list-group-item"><i class="material-icons media-left">drive_eta</i>
						<div class="media-body">Vestibulum at eros</div>
					</li>
				</ul>
			</div>
			<div class="pmd-modal-action pmd-modal-bordered text-right">
				<button data-dismiss="modal"  class="btn pmd-ripple-effect btn-primary pmd-btn-flat" type="button">Cancel</button>
			</div>
		</div>
	</div>
</div>
